<div class="layui-form" lay-filter="form-pdr-api">
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>

    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr style="height: 40px;line-height: 40px;">
            <th>参数名</th>
            <th>参数描述</th>
            <th>参数类型</th>
            <th>示例</th>
            <th style="text-align: center;">
                <button class="layui-btn layui-btn-xs layui-btn-normal" id="outAdd">添加</button>
            </th>
        </tr>
        </thead>
        <input type="hidden" id="indexArrayStr" name="indexArrayStr" value=""/>
        <tbody id="inBox"></tbody>
    </table>

    <input type="button" lay-submit lay-filter="LAY-pdr-api-out-complete-submit" value="确定"
           class="layui-btn layui-btn-fluid">
</div>

<script>
    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter'], function () {
            var $ = layui.$
                , admin = layui.admin
                , form = layui.form
                , setter = layui.setter;

            var apiUrl = setter.apiUrl;

            var index = 0;

            var indexArray = [];

            $('body').off('click', '#outAdd').on("click", "#outAdd", function () {
                let single = {name: "", desc: "", type: "number", example: ""};
                generatorHtml(single)
                form.render('select');
            });

            $('body').off('click', '.delete').on("click", ".delete", function () {
                // if (indexArray.length === 1) {
                //     layer.msg('必须至少存在一个参数', {
                //         offset: '15px', icon: 1, time: 1000
                //     });
                //     return;
                // }
                let delObj = $($(this)).parent().parent();
                let idx = delObj.attr("idx");
                removeByVal(indexArray, idx);
                $('#indexArrayStr').val(indexArray.join());
                delObj.remove();
                layer.closeAll('dialog');
            });

            console.log(params);
            init();

            function init() {
                for (var i = 0; i < params.length; i++) {
                    let single = params[i];
                    generatorHtml(single);
                }
                form.render();
                form.render('select');
            }

            function generatorHtml(data) {
                let idx = generatorIndex();
                indexArray.push(idx);
                let singleData = data;

                $('#indexArrayStr').val(indexArray.join());
                let singleHtml = '';
                singleHtml += '<tr idx="' + idx + '"><td><input type="text" name="name[' + idx + ']" value="' + singleData.name + '" class="layui-input"/></td>';
                singleHtml += '<td><input type="text" name="desc[' + idx + ']" value="' + singleData.desc + '" class="layui-input"/></td>';
                singleHtml += '<td><select id="type' + idx + '" name="type[' + idx + ']" class="layui-select">' +
                    '                    <option value="number">number</option>' +
                    '                    <option value="string">string</option>' +
                    '                    <option value="date">date</option>' +
                    '                    <option value="timestamp">timestamp</option>' +
                    '           </select></td>';

                singleHtml += '<td><input type="text" name="example[' + idx + ']" value="' + singleData.example + '" class="layui-input"/></td>';

                singleHtml += '<td style="text-align:center;"><button class="layui-btn layui-btn-xs layui-btn-danger delete" idx="' + idx + '">删除</button></td></tr>';

                $('#inBox').append(singleHtml);

                $('#type' + idx).val(singleData.type);

                form.render('select');

            }


            function generatorIndex() {
                return index++;
            }

            function removeByVal(arryList, val) {
                for (var i = 0; i < arryList.length; i++) {
                    if (arryList [i] == val) {
                        arryList.splice(i, 1);
                        break;
                    }
                }
            }

        });
    }
</script>